<template>
  <a-spin :loading='loading' style='width: 100%'>
    <a-card class='general-card' :header-style="{ paddingBottom: '14px' }">
      <template #title>
        <h3 style='margin-top: 0;padding: 0;color: #000000;text-align: center'>24小时分布</h3>
      </template>
      <Chart style='width: 100%; height: 347px' :option='chartOption' />
    </a-card>
  </a-spin>
</template>

<script lang='ts' setup>
import { ref } from "vue";
import { ToolTipFormatterParams } from "@/types/echarts";
import useLoading from "@/hooks/loading";
import useChartOption from "@/hooks/chart-option";

const tooltipItemsHtmlString = (items: ToolTipFormatterParams[]) => {
  return items
    .map(
      (el) => `<div class='content-panel'>
    <p>
      <span style='background-color: ${
        el.color
      }' class='tooltip-item-icon'></span>
      <span>
      ${el.seriesName}
      </span>
    </p>
    <span class='tooltip-value'>
      ${Number(el.value).toLocaleString()}
    </span>
  </div>`
    )
    .join("");
};

const { loading, setLoading } = useLoading(true);
const xAxis = ref<string[]>([]);
const imgChartsData = ref<number[]>([]);
const { chartOption } = useChartOption((isDark) => {
  return {
    grid: {
      left: "4%",
      right: 0,
      top: "20",
      bottom: "60"
    },
    legend: {
      bottom: 0,
      icon: "circle",
      textStyle: {
        color: "#4E5969"
      }
    },
    xAxis: {
      type: "category",
      data: xAxis.value,
      axisLine: {
        lineStyle: {
          color: isDark ? "#3f3f3f" : "#A9AEB8"
        },
        minInterval: 1,
      },
      axisTick: {
        show: true,
        alignWithLabel: true,
        lineStyle: {
          color: "#86909C"
        }
      },
      axisLabel: {
        color: "#86909C"
      }
    },
    yAxis: {
      type: "value",
      axisLabel: {
        color: "#86909C",
        minInterval: 1,
        formatter (value: number, idx: number) {
          if (idx === 0) return `${value}`;
          return `${value}`;
        }
      },
      splitLine: {
        lineStyle: {
          color: isDark ? "#3F3F3F" : "#E5E6EB"
        }
      }
    },
    tooltip: {
      show: true,
      trigger: "axis",
      formatter (params) {
        const [firstElement] = params as ToolTipFormatterParams[];
        return `<div>
            <p class='tooltip-title'>${firstElement.axisValueLabel}</p>
            ${tooltipItemsHtmlString(params as ToolTipFormatterParams[])}
          </div>`;
      },
      className: "echarts-tooltip-diy"
    },
    series: [
      {
        name: "访问人数",
        data: imgChartsData.value,
        stack: "one",
        type: "bar",
        barWidth: 10,
        color: isDark ? "#085FEF" : "#4d4dff"
      }
    ]
  };
});
const fetchData = async () => {
  setLoading(true);
  xAxis.value = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23", "24"];
  imgChartsData.value = [0, 0, 0, 0, 1, 3, 1, 0, 0, 0, 0, 0, 1, 3, 1, 0, 1, 0, 0];
  setLoading(false);
};
fetchData();
</script>

<style scoped lang='less'></style>
